<template>
  <div>
    <!-- 在途运单-详情 -->
    <breadcrumb></breadcrumb>
    <div class="titleBox" v-if="result.wayDetailInfoVo != undefined">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox" v-if="result.wayDetailInfoVo != undefined">
        <!-- PAYING(3, "等待付款"),
        PAID(4, "已付款"),
        SHIPMENTING(5, "发货中"),
        SHIPMENTED(6, "已发货"),
        WAITING_PAY(7, "等待到付"),
        TO_SIGN(8, "待签收"),
        WAITING_RECEIPT(9, "等待签收回单"),
        SIGNED(10, "已签收"),
        -->
        <div class="info_line1">
          <h3 class="tit">{{ result.wayDetailInfoVo.orderNo }}</h3>
          <div class="tag" v-if="result.wayDetailInfoVo.transportStatus == 9 &&
            result.waybillAuditInfoVo.waybillAuditResult == 0
            ">
            等待付款
          </div>
          <div class="tag" v-if="(result.wayDetailInfoVo.transportStatus == 9 &&
            result.waybillAuditInfoVo.waybillAuditResult == 3) ||
            result.waybillAuditInfoVo.waybillAuditResult == 2
            ">
            已完成
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 8">
            已送达
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 7">
            运输中
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 6">
            装运完成
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 5">
            待装运
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 4">
            已发货
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 3">
            部分发货
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 2">
            未发货
          </div>
          <div class="tag" v-else-if="result.wayDetailInfoVo.transportStatus == 1">
            无需配送
          </div>
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">
            业务类型：{{ result.wayDetailInfoVo.orderTypeStr }}
          </div>
          <div>司机姓名：{{ result.waySEAddressInfoVo.driverName }}</div>
        </div>
      </div>
      <!--  <button class="examineBtn" v-if="result.wayDetailInfoVo.transportStatus == 9 && result.waybillAuditInfoVo.waybillAuditResult == 0">
        <i class="iconfont icon-hetongguanli2"></i>
        <span>审核</span>
      </button> -->
    </div>
    <!-- tabs切换 -->
    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="运单信息" name="first">
          <div class="main_item" v-if="result.wayDetailInfoVo != undefined">
            <titleVue :title="'运单信息'"></titleVue>
            <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
              <el-descriptions-item label="订单编号">{{
                result.wayDetailInfoVo.orderNo
              }}</el-descriptions-item>
              <el-descriptions-item label="项目名称">{{
                result.wayDetailInfoVo.projectName
              }}</el-descriptions-item>
              <el-descriptions-item label="计价方式">
                {{ result.wayDetailInfoVo.pricingMethodStr }}
              </el-descriptions-item>
              <el-descriptions-item label="计量单位">{{
                result.wayDetailInfoVo.measureUnitStr
              }}</el-descriptions-item>
              <el-descriptions-item label="运量">{{
                result.wayDetailInfoVo.cargoWeight
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                result.wayDetailInfoVo.contact
              }}</el-descriptions-item>
              <el-descriptions-item label="车牌号">{{
                result.wayDetailInfoVo.numberplate
              }}</el-descriptions-item>
              <el-descriptions-item label="车辆类型" :span="2">{{
                result.wayDetailInfoVo.vehicleType
              }}</el-descriptions-item>
              <el-descriptions-item label="参数">
                <div>
                  载重{{ result.wayDetailInfoVo.loadCapacity }}吨, 车厢长{{
                    result.wayDetailInfoVo.carriageLength / 10
                  }}米, 车高{{ result.wayDetailInfoVo.vehicleHeight }}米, 载方{{
  result.wayDetailInfoVo.loadSide
}}方
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="品牌型号">{{
                result.wayDetailInfoVo.brandModel
              }}</el-descriptions-item>
              <el-descriptions-item label="规格">{{
                result.wayDetailInfoVo.specification
              }}</el-descriptions-item>
              <el-descriptions-item label="车辆照片">
                <div class="picBox">
                  <el-image class="pic" :src="result.wayDetailInfoVo.carFortyFive"
                    :preview-src-list="[result.wayDetailInfoVo.carFortyFive]">
                  </el-image>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="司机照片">
                <div class="picBox">
                  <el-image class="pic" :src="result.wayDetailInfoVo.driverPhoto"
                    :preview-src-list="[result.wayDetailInfoVo.driverPhoto]">
                  </el-image>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="运费信息" name="second">
          <div class="main_item" v-if="result.wayPriceInfoVo != undefined">
            <titleVue :title="'运费信息'"></titleVue>

            <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
              <el-descriptions-item label="司机单价">{{ result.wayPriceInfoVo.unitPrice }}元</el-descriptions-item>
              <el-descriptions-item label="司机运费">{{ result.wayPriceInfoVo.freight }}元</el-descriptions-item>
              <el-descriptions-item label="搬运费">{{
                result.wayPriceInfoVo.handlingAmount == null
                ? "0"
                : result.wayPriceInfoVo.handlingAmount
              }}元
              </el-descriptions-item>
              <el-descriptions-item label="过路费">{{
                result.wayPriceInfoVo.tollAmount == null
                ? "0"
                : result.wayPriceInfoVo.tollAmount
              }}元</el-descriptions-item>
              <el-descriptions-item label="停车费">{{
                result.wayPriceInfoVo.parkingAmount == null
                ? "0"
                : result.wayPriceInfoVo.parkingAmount
              }}元</el-descriptions-item>
              <el-descriptions-item label="等候费">{{
                result.wayPriceInfoVo.waitingAmount == null
                ? "0"
                : result.wayPriceInfoVo.waitingAmount
              }}元</el-descriptions-item>
              <el-descriptions-item label="小费">{{
                result.wayPriceInfoVo.tipAmount == null
                ? "0"
                : result.wayPriceInfoVo.tipAmount
              }}元</el-descriptions-item>
              <el-descriptions-item label="司机金额">{{
                result.wayPriceInfoVo.driverAmount == null
                ? "0"
                : result.wayPriceInfoVo.driverAmount
              }}元</el-descriptions-item>
            </el-descriptions>

            <div v-if="orderInfoUpdateRecord" style="margin-left: 2%;">
            <titleVue :title="'驳回信息'"></titleVue>
            <el-table :data="orderInfoUpdateRecord" style="width: 100%">
              <el-table-column prop="pricingMethod" label="计价方式" width="100">
                <template slot-scope="scope">
                  <div v-if="scope.row.pricingMethod == 1">
                    按里程
                  </div>
                  <div v-if="scope.row.pricingMethod == 2">
                    按量
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="measureUnit" label="计量单位" width="100">
                <template slot-scope="scope">
                  <div v-if="scope.row.measureUnit == 1">
                    车
                  </div>
                  <div v-if="scope.row.measureUnit == 2">
                    吨
                  </div>
                  <div v-if="scope.row.measureUnit == 3">
                    件
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="cargoWeight" label="运量" width="100">
              </el-table-column>
              <el-table-column prop="ownerUnitPrice" label="货主单价" width="100">
              </el-table-column>
              <el-table-column prop="totalAmount" label="货主金额" width="100">
              </el-table-column>
              <el-table-column prop="transUnitPrice" label="司机单价" width="100">
              </el-table-column>
              <el-table-column prop="contractorAmount" label="司机运费" width="100">
              </el-table-column>
              <el-table-column  label="驳回附件">
                <template slot-scope="scope">
                  <div @click="showFile(scope.row.attachment)" style="color: rgb(39, 127, 241);font-size: 15px;cursor: pointer;">{{ scope.row.attachment }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="驳回备注">
              </el-table-column>
              <el-table-column prop="createTime" label="驳回编辑时间">
              </el-table-column>
              
            </el-table>
          </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="时间信息" name="third">
          <div class="main_item" v-if="result.wayTimeInfoVo != undefined">
            <titleVue :title="'时间信息'"></titleVue>
            <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
              color: '#939393',
              fontSize: '12px',
              fontWeight: 'bold',
              marginRight: '20px',
            }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
              <el-descriptions-item label="订单发布时间">{{
                result.wayTimeInfoVo.createTime
              }}</el-descriptions-item>
              <el-descriptions-item label="订单截止时间" :span="2">{{
                result.wayTimeInfoVo.endTime
              }}</el-descriptions-item>
              <el-descriptions-item label="发货时间">{{
                result.wayTimeInfoVo.startTime
              }}</el-descriptions-item>
              <el-descriptions-item label="送达时间">{{
                result.wayTimeInfoVo.finishTime
              }}</el-descriptions-item>
              <el-descriptions-item label="司机接单时间">{{
                result.wayTimeInfoVo.createTime
              }}</el-descriptions-item>
              <el-descriptions-item label="司机启运时间">{{
                result.wayTimeInfoVo.runBeginTime
              }}</el-descriptions-item>
              <el-descriptions-item label="司机到达时间">{{
                result.wayTimeInfoVo.arrivalTime
              }}</el-descriptions-item>
              <el-descriptions-item label="司机回单时间">{{
                result.wayTimeInfoVo.receiptBackTime
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="收发货信息" name="fourth">
          <div class="main_item" v-if="result.waySEAddressInfoVo != undefined">
            <titleVue :title="'收发货信息'"></titleVue>
            <div class="ShippingReceiving_head">
              <div class="info_item">
                <div class="label">线路名称:</div>
                <div class="value">
                  <span class="text">{{
                    result.waySEAddressInfoVo.lineName == null
                    ? "无"
                    : result.waySEAddressInfoVo.lineName
                  }}</span>
                </div>
              </div>
              <div class="info_item" style="margin-left: 242px">
                <div class="label">距离(公里):</div>
                <div class="value">
                  <span class="text">{{
                    result.waySEAddressInfoVo.totalDistant
                  }}</span>
                </div>
              </div>
            </div>
            <div class="list">
              <el-table style="width: 100%" header-align="left" :data="records" :header-cell-style="tableHeaderStyle"
                :row-class-name="rowStyle" border>
                <!-- updateFreightVolume:"10",// 司机修正运量
determine:"15",// 审核确定运量
examinefreight:"150.00元",// 审核司机运费

Deduction:"5.00元",// 审核异常扣款
time:"2022-03-20 10:20:30",// 审核时间
// 司机上传附件 -->
                <el-table-column align="left" prop="" label="运单状态" width="100px">
                  {{ result.waySEAddressInfoVo.transportStatusStr }}
                </el-table-column>
                <el-table-column align="left" prop="" label="运单编号" width="200px">
                  <template>
                    <div>
                      <el-button type="text" size="small"></el-button>
                      {{ result.waySEAddressInfoVo.waybillNo }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="left" prop="" label="司机姓名" width="100px">
                  {{ result.waySEAddressInfoVo.driverName }}
                </el-table-column>
                <el-table-column align="left" prop="" label="车辆信息" width="100px">
                  {{ result.waySEAddressInfoVo.numberplate }}
                </el-table-column>
                <el-table-column align="left" prop="" label="发货地" min-width="180">
                  <template>
                    <div v-if="result.waySEAddressInfoVo.startAddress.length != 0">
                      <div v-for="(item, i) in result.waySEAddressInfoVo.startAddress" :key="i">{{ item }}</div>
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column align="left" prop="" label="目的地" min-width="180">
                  <template>
                    <div v-if="result.waySEAddressInfoVo.endAddress.length != 0">
                      <div v-for="(item, i) in result.waySEAddressInfoVo.endAddress" :key="i">{{ item }}</div>
                    </div>
                    <div v-else>无</div>
                  </template>
                </el-table-column>
                <el-table-column align="left" prop="" label="货物数量">
                  {{ result.waySEAddressInfoVo.cargoQuantity || '--.--' }}
                </el-table-column>
                <el-table-column align="left" prop="" label="司机运费">
                  {{ result.waySEAddressInfoVo.unitPrice }}
                </el-table-column>
                <el-table-column align="left" prop="" label="接单时间" width="150px">
                  {{ result.waySEAddressInfoVo.createTime }}
                </el-table-column>
                <el-table-column align="left" label="货物明细" width="120px">
                  <template>
                    <div>
                      <el-button type="text" size="small" @click="showDialog()">查看</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 地图 -->
    <div class="infoMainBox">
      <titleVue :title="'线路信息'" :iconName="'icon-xianluxinxi'"></titleVue>
      <div class="MapBox">
        <iframe src="/line.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100%" height="340"
          ref="iframe" id="iframetest"></iframe>
        <div class="tagBox">
          <span class="tag_label">本次线路规划司机: </span>
          <div class="tag" v-if="result.isEdit == 0">未更改</div>
          <div class="tag yellow" v-else>已更改</div>
        </div>

      </div>
      <titleVue :title="'节点信息'" :elIconName="'el-icon-location-outline'"></titleVue>
      <div class="steps">
        <el-steps direction="vertical">
          <el-step v-for="item in result.nodeInfoObject" :key="item.id">
            <!-- 自定义步骤图标 -->
            <template slot="icon">
              <div class="CircleDian"></div>
            </template>
            <!-- 自定义标题 -->
            <template slot="title">
              <div class="stepTitle">{{ item.remark }}</div>
            </template>
            <!-- 自定义内容 -->
            <template slot="description">
              <div class="stepContent">
                <div class="dateTime">{{ item.createTime }}</div>
                <!-- 判断对象中是否有指定属性名picArr,有则返回true 反之false -->
                <div class="picBox" v-if="item.url != null && item.url != ''">
                  <div class="picTitle">图片:</div>
                  <div class="pic_item" v-for="picItem in item.url" :key="picItem">
                    <el-image class="pic" :src="picItem" :preview-src-list="item.url">
                    </el-image>
                  </div>
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <titleVue :title="'审核信息'" :iconName="'icon-shenhexinxi'"></titleVue>

      <div class="AuditInfoBox"
        v-if="result.waybillAuditInfoVo != undefined && result.waybillAuditInfoVo.waybillAuditResult != null">
        <div class="AuditInfo_head">
          <div class="info_item">
            <div class="label">审核结果:</div>
            <div class="value" v-if="result.waybillAuditInfoVo.waybillAuditResult == 0">
              <i class="iconfontcolor icon-dairenzheng iconStyle"></i>
              <span style="color: #32cf84">未审核</span>
            </div>
            <div class="value" v-if="result.waybillAuditInfoVo.waybillAuditResult == 3">
              <i class="iconfontcolor icon-hegui iconStyle"></i>
              <span style="color: #32cf84">合规</span>
            </div>
            <div v-if="result.waybillAuditInfoVo.waybillAuditResult == 1" class="value">
              <i class="iconfontcolor icon-zuofei iconStyle"></i>
              <span style="color: #f5222d">作废</span>
            </div>
            <div v-if="result.waybillAuditInfoVo.waybillAuditResult == 2" class="value">
              <i class="iconfontcolor icon-youyichang iconStyle"></i>
              <span style="color: #f9aa0d">有异常</span>
            </div>
          </div>
          <div class="info_item">
            <div class="label">审核说明:</div>
            <div class="value">
              <span class="text"></span>
              {{ result.waybillAuditInfoVo.resultInfo }}
            </div>
          </div>
          <div class="info_item">
            <div class="label">审核人:</div>
            <div class="value">
              <span class="text" style="margin-right: 167px"></span>
              {{ result.waybillAuditInfoVo.auditUser }}
            </div>
          </div>
        </div>
        <div class="list">
          <el-table style="width: 100%" header-align="left" :data="records">
            <!-- updateFreightVolume:"10",// 司机修正运量
    determine:"15",// 审核确定运量
    examinefreight:"150.00元",// 审核司机运费

    Deduction:"5.00元",// 审核异常扣款
    time:"2022-03-20 10:20:30",// 审核时间
   // 司机上传附件 -->
            <el-table-column align="left" prop="" label="司机修正运量">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核确定运量">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核司机运费">
              {{ result.waybillAuditInfoVo.amendWeight }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核异常扣款">
              {{ result.waybillAuditInfoVo.amountLose }}
            </el-table-column>
            <el-table-column align="left" prop="" label="审核时间">
              {{ result.waybillAuditInfoVo.resultTime }}
            </el-table-column>
            <el-table-column align="left" label="司机上传附件">
              <el-button type="text" size="small" v-if="result.waybillAuditInfoVo.photoUrls"
                @click.native="goUrl(result.waybillAuditInfoVo.photoUrls)">点击查看附件</el-button>
              <div v-else>
                无
              </div>
            </el-table-column>
            <el-table-column align="left" label="审核附件">
              <el-button type="text" size="small" v-if="result.waybillAuditInfoVo.auditUrls"
                @click.native="goUrl(result.waybillAuditInfoVo.auditUrls)">点击查看附件</el-button>
              <div v-else>
                无
              </div>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else style="text-align: center">
        暂无审核信息
      </div>
    </div>
    <!-- 详情对话框 -->
    <el-dialog class="shippingDetail" title="货物明细" :visible.sync="dialogVisible" width="900px">
      <div class="NoDataBox" v-if="huowu.length == 0">
        <img class="NoData" src="../../assets/img/noData.png" alt="">
      </div>
      <div v-for="(item, i) in huowu" :key="i" style="margin-bottom: 15px;">
        <div class="mudiBox">
          <div class="mudi">目的地:</div>
          <div class="address">{{ item.title }}</div>
        </div>
        <div class="dialog_list">
          <el-table :data="item.orderCargoDetails" style="width: 100%" header-align="left">
            <el-table-column align="left" prop="" width="80" label="序号">
            </el-table-column>
            <el-table-column align="left" prop="cargoType" label="大类"></el-table-column>
            <el-table-column align="left" prop="cargoName" label="货物名称"></el-table-column>
            <el-table-column align="left" prop="cargoWeight" label="运量">
            </el-table-column>
            <el-table-column align="left" prop="brand" label="品牌">
            </el-table-column>
            <el-table-column align="left" prop="cargoVolume" label="规格">
            </el-table-column>
            <el-table-column align="left" prop="cargoQuantity" label="数量">
            </el-table-column>
            <el-table-column align="left" prop="description" label="备注">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      dialogVisible: false,
      huowu: [],
      result: {},

      pictureArr: [],
      activeName: "first",
      waybillId: "",
      /* 联系发货人 前往出发地 到达出发地 完成装货 前往目的地 完成卸货 发起收款/完成订单 */
      stepsArr: [
        {
          stateValue: "0",
          label: "联系发货人",
          dateTime: "03-10 10:20",
        },
        {
          stateValue: "1",
          label: "前往出发地",
          dateTime: "03-10 10:20",
        },
        {
          stateValue: "2",
          label: "到达出发地",
          dateTime: "03-10 10:20",
        },
        {
          stateValue: "3",
          label: "完成装货",
          dateTime: "03-10 10:20",
          picArr: [
            {
              picSrc: "background.png",
              pid: "1",
            },
            {
              picSrc: "background.png",
              pid: "2",
            },
          ],
        },
        {
          stateValue: "4",
          label: "前往目的地",
          dateTime: "03-10 10:20",
        },
        {
          stateValue: "5",
          label: "完成卸货",
          dateTime: "03-10 10:20",
          picArr: [
            {
              picSrc: "background.png",
              pid: "1",
            },
            {
              picSrc: "background.png",
              pid: "2",
            },
          ],
        },
        {
          stateValue: "6",
          label: "发起收款/完成订单",
          dateTime: "03-10 10:20",
        },
      ],
      records: [
        {
          updateFreightVolume: "10", // 司机修正运量
          determine: "15", // 审核确定运量
          examinefreight: "150.00元", // 审核司机运费

          Deduction: "5.00元", // 审核异常扣款
          time: "2022-03-20 10:20:30", // 审核时间
          // 司机上传附件
        },
      ],
      orderInfoUpdateRecord:null
    };
  },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:48px;paddingTop:8px;paddingBottom:8px;'
    },
    rowStyle({ row, rowIndex }) {
      return 'tableRowStyleName'
    },
    init() { },

    getListOrder() {
      this.waybillId = this.$route.params.waybillId;
      let params = { waybillId: this.waybillId };
      httpApi.WaybillManagementApi.getWaybillDetail(params).then((res) => {
        // console.log("getWaybillDetail.response=",res)
        if (res.data.code == 200) {
          this.orderInfoUpdateRecord = res.data.data.orderInfoUpdateRecord
          res.data.data.nodeInfoObject.forEach(item => {
            if (item.url != null && item.url != '') {
              // console.log(item.url);
              item.url = item.url.split(',')

            }
          })
          // 地址字符串分隔为数组
          res.data.data.waySEAddressInfoVo.startAddress=res.data.data.waySEAddressInfoVo.startAddress.split(',')
          res.data.data.waySEAddressInfoVo.endAddress=res.data.data.waySEAddressInfoVo.endAddress.split(',')
           
        

          // console.log(res.data.data.nodeInfoObject);
          this.result = res.data.data;


          this.$refs.iframe.contentWindow.ToManualRoamFunc(
            this.result.wayAddressInfoVo.startLineInfoVos
          );
        }
      });
    },
    goUrl(url) {
      window.open(url, "_blank");
    },
    handleClick() { },
    showDialog() {
      // console.log("index="+index)
      let params = {
        orderId: this.result.wayDetailInfoVo.orderId,
      };
      // console.log("orderId=",params)
      let v = this;
      httpApi.orderManagementApi.orderGoods(params).then(function (rsp) {
        // console.log("orderGoods.response=",rsp)
        v.huowu = rsp.data.data;
        // console.log("huowu=",v.huowu)
      });
      this.dialogVisible = true;
    },
  },
  mounted() {
    this.getListOrder();
    this.init();
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 9px;

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;
    margin-left: auto;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }

    .icon-hetongguanli {
      font-size: 15px;
      margin-right: 6px;
      color: #ffffff;
    }
  }
}

.main {
  background-color: #fff;

  .mainTabs {
    ::v-deep .el-tabs__nav {
      margin-left: 38px;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 50px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 50px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #f0f0f0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ecf5fe;
      color: #1890ff;
    }
  }

  .main_item {
    padding: 31px 30px 36px 30px;

    .descriptionsInfo {
      .picBox {
        width: 80px;
        height: 60px;
        border-radius: 6px;

        .pic {
          width: 80px;
          height: 60px;
        }
      }
    }

    .ShippingReceiving_head {
      width: 100%;
      display: flex;
      font-size: 12px;
      margin-bottom: 16px;

      .info_item {
        display: flex;

        .label {
          margin-right: 22px;
          color: #939393;
          height: 16px;
        }

        .value {
          display: flex;
          align-items: center;

          .text {
            color: #262626;
            height: 16px;
          }
        }
      }
    }
  }
}

// 下方主要信息模块 线路信息 节点信息 审核信息
.infoMainBox {
  background-color: #fff;
  padding: 34px 30px 37px;


  .MapBox {
    width: 100%;
    height: 340px;
    margin-bottom: 36px;

    .tagBox {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .tag_label {
        color: #262626;
        font-size: 12px;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;

        &.yellow {
          background-color: #FFFCE8;
          color: #F9AA0D;
        }
      }
    }


  }

  // 线路信息步骤样式
  .steps {
    padding: 21px 32px;
    width: 100%;

    // 去组件默认样式
    ::v-deep .el-step__icon.is-text {
      border: none;
    }

    // 修改 连接线颜色
    ::v-deep .el-step.is-vertical .el-step__line {
      background-color: #c4c4c4;
      width: 2px;
    }

    .CircleDian {
      width: 8px;
      height: 8px;
      background: #c4c4c4;
      border-radius: 50%;

      &.activeStep {
        background: #1890ff;
        width: 10px;
        height: 10px;
      }
    }

    //发起人信息
    .stepTitle {
      font-size: 16px;
      color: #262626;
      height: 24px;
      margin-bottom: 4px;
    }

    //步骤内容
    .stepContent {
      width: 100%;

      .dateTime {
        font-size: 12px;
        color: #333333;
        height: 24px;
      }

      .picBox {
        display: flex;
        height: 60px;
        margin-bottom: 16px;

        .picTitle {
          height: 20px;
          color: #333333;
          font-size: 12px;
          margin-right: 4px;
        }

        .pic_item {
          display: flex;

          .pic {
            width: 80px;
            height: 60px;
            margin-right: 8px;
            border-radius: 6px;
          }
        }
      }
    }
  }

  // 审核信息样式
  .AuditInfoBox {
    .AuditInfo_head {
      display: flex;
      font-size: 12px;
      justify-content: space-between;
      margin-bottom: 16px;

      .info_item {
        display: flex;

        .label {
          margin-right: 22px;
          color: #939393;
          height: 16px;
        }

        .value {
          display: flex;
          align-items: center;

          .iconStyle {
            font-size: 16px;
            margin-right: 4px;
          }

          .text {
            color: #262626;
            height: 16px;
          }
        }
      }
    }

    .list {

      // 表头样式
      ::v-deep .el-table__header th {
        padding: 8.05px 0;
      }

      ::v-deep .el-table__header th {
        background-color: #f5f5f5;
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        text-align: left;

        // 表 body的td
        ::v-deep .el-table__body td {
          color: #595959;
          font-size: 12px;
        }
      }
    }
  }
}

.shippingDetail {
  .NoDataBox {
    width: 100%;
    display: flex;
    align-items: center;
    height: 300px;
    justify-content: center;

    .NoData {
      height: 70%;
      width: 50%;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 35px 32px 80px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .mudiBox {
    display: flex;
    margin-bottom: 19px;

    .mudi {
      color: #939393;
      font-size: 12px;
      margin-right: 19px;
    }

    .address {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8.05px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }
  }
}
</style>

<style lang = "scss">
.tableRowStyleName {
  color: #262626 !important;
  font-size: 12px;
  padding: 0px;
}
</style>
